<!--
 * @Author: huangwenqian
 * @Date: 2022-07-29 16:08:09
 * @LastEditors: huangwenqian 2225626487@qq.com
 * @LastEditTime: 2022-07-29 16:09:19
 * @FilePath: \zrar-ui\lib\card\index.vue
 * @Description: 卡片
-->
<template>
  <a-card
    :active-tab-key="activeTabKey"
    :body-style="bodyStyle"
    :bordered="bordered"
    :default-active-tab-key="defaultActiveTabKey"
    :extra="extra"
    :head-style="headStyle"
    :hoverable="hoverable"
    :loading="loading"
    :size="size"
    :tab-list="tabList"
    :title="title"
    :type="type"
    @tabChange="tabChange"
  >
    <template v-if="$slots.extra" #extra>
      <slot name="extra" />
    </template>
    <template v-if="$slots.title" #title>
      <slot name="title" />
    </template>
    <template v-if="$slots.actions" #actions>
      <slot name="actions" />
    </template>
    <template v-if="$slots.cover" #cover>
      <slot name="cover" />
    </template>
    <template v-if="$slots.customTab" #customTab="{item}">
      <slot name="customTab" :item="item" />
    </template>
    <template v-if="$slots.tabBarExtraContent" #tabBarExtraContent>
      <slot name="tabBarExtraContent" />
    </template>
    <slot />
  </a-card>
</template>
<script>
import { defineComponent } from 'vue'
import { Card } from 'ant-design-vue'

export default defineComponent({
  name: 'ZCard',
  components: {
    ACard: Card
  },
  props: {
    activeTabKey: {
      type: String,
      default: undefined
    },
    bodyStyle: {
      type: Object,
      default: undefined
    },
    bordered: {
      type: Boolean,
      default: true
    },
    defaultActiveTabKey: {
      type: String,
      default: undefined
    },
    extra: {
      type: String,
      default: undefined
    },
    headStyle: {
      type: Object,
      default: undefined
    },
    hoverable: {
      type: Boolean,
      default: false
    },
    loading: {
      type: Boolean,
      default: false
    },
    size: {
      type: String,
      default: 'default'
    },
    tabList: {
      type: Array,
      default: undefined
    },
    title: {
      type: String,
      default: undefined
    },
    type: {
      type: String,
      default: undefined
    }
  },
  methods: {
    tabChange(key) {
      this.$emit('tabChange', key)
    }
  }
})
</script>
